<template>
  <div class="yq-userinfo">
    <yq-header></yq-header>
    <!-- 用户名,说明等 -->
    <div class="yq-userinfo-desc">
      <div class="avatar" v-if="yqUser.avatar_url !== ''">
        <img :src="yqUser.avatar_url" alt="头像"/>
      </div>
      <div class="info">
        <div class="name">{{ yqUser.name }}</div>
        <div class="desc">{{ yqUser.description }}</div>
        <div class="desc">Doc:{{ yqStat.articleNum }} | Words:{{ yqStat.wordNum }}</div>
      </div>
    </div>

    <div class="yq-userinfo-content">

      <!-- 操作按钮 -->
      <div class="yq-userinfo-content-btns">
        <ol>
          <li @click="toList"> 语雀首页</li>
          <li @click="toYqSpecial"> 专题文章</li>
        </ol>
      </div>

      <!-- 操作按钮及图标 -->
      <div class="yq-userinfo-content-charts">
        <yq-gitee-heatmap></yq-gitee-heatmap>
      </div>

    </div>

    <div class="yq-userinfo-footer">
      <div class="record">{{ record }}</div>
    </div>
  </div>
</template>

<script>
import YqGiteeHeatMap from "@/components/YqGiteeHeatMap";
import YqHeader from "@/views/yuque/YqHeader";
import {yqStat, yqUser} from '@/api/apis/yuque';
import obConstants from '@/assets/js/obConstants'

export default {
  name: "yqUserInfo",
  data() {
    return {
      yqUser: {
        avatar_url: '',
        name: '',
        description: ''
      },
      yqStat: {
        articleNum: 0,
        wordNum: 0
      }
    }
  },
  computed: {
    record() {
      return obConstants.SYS.VERSION + ' | ' + obConstants.SYS.RECORD_ID;
    },
    profile() {
      return obConstants.USER.PROFILE_URL
    }
  },
  methods: {
    toList() {
      window.open(obConstants.USER.YUQUE_HOME)
    },
    toYqSpecial() {
      this.$router.push('/yq/special');
    },
    openNew(url) {
      window.open(url)
    },
    openThis(url) {
      window.location.href = url
    },
    getYqStat() {
      yqStat().then(res => {
        let {code, data} = res;
        if (code === 20000) {
          this.yqStat = data
        }
      })
    },
    getYqUser() {
      yqUser().then(res => {
        let {code, data} = res;
        if (code === 20000) {
          this.yqUser = data
        }
      })
    },
  },
  mounted() {
    this.getYqUser();
    this.getYqStat();
  },
  components: {
    'yq-header': YqHeader,
    'yq-gitee-heatmap': YqGiteeHeatMap
  }
}
</script>

<style scoped lang='scss'>
// 整体左边距
$info-width: 400px;

.yq-userinfo {
  @include box();
  //min-width: 530px;
  @include flex(column, flex-start, center);

  &-desc {
    height: 40%;
    @include flex(row, flex-start, flex-end);
    .avatar {
      img {
        @include box(100px, 100px);
        border-radius: 15%;
      }
    }

    .info {
      text-align: left;
      padding-left: 20px;
      .name {
        @include font(38px, #ffffff, 200);
        letter-spacing: 5px;
      }

      .desc {
        @include font(15px, #7a7a7a, 700);
        font-family: ubuntumono, sans-serif;
        letter-spacing: 1px;
      }
    }
  }

  &-content {
    height: 60%;
    padding-top: 5px;

    // 操作按钮
    &-btns {
      @include flex(row, flex-start, center);
      margin-left: 30px;
      margin-top: 10px;

      ol, ul {
        @include font(15px, #7a7a7a, 500);
        text-align: left;

        li {
          transition: color 0.3s;
          cursor: pointer;

          &:hover {
            color: #cccccc;
          }
        }

      }
    }

    &-charts {
      margin-left: -10px;
    }

  }

  &-footer {
    @include box(100%, 30px);
    .record {
      @include font(12px, #7a7a7a);
      width: 100%;
      padding-left: 10px;
    }
  }
}



</style>
